<template>
  <div class="bread-crumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="item in breadList" :key="item.url"
                          :to="item.query ? {name:item.url,query:item.query} : {name:item.url}">{{item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>
<script>
export default {
  name: "BreadCrumb",
  data() {
    return {};
  },
  created() {},
  computed: {
    breadList: {
      set() {
        return this.$store.state.breadList;
      },
      get() {
        return this.$store.state.breadList;
      }
    }
  },
  watch: {
    $route() {
      this.breadList = this.$store.state.breadList;
      let arr = [];
      for (let i = 0; i < this.breadList.length; i++) {
        arr.push(this.breadList[i]);
        if (this.breadList[i].url === this.$route.name) {
          this.$store.commit("setBreadList", arr);
          this.breadList = arr;
          console.log(this.breadList,'介是面包屑中的数据');
          break;
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.bread-crumb {
  padding-bottom: 10px;
}
</style>
